<template>
	<view class="logout">
		<view class="title">用户信息</view>
		<view class="info">
			<view class="account">
				<text class="text">账号信息</text>
				<view class="account-info">
					<view class="username">
						<image class="img" src="/static/image/mipmap-xhdpi/user.png" mode=""></image>
						<input class="input" placeholder-class="account-placeholder" type="text" :value="username" placeholder="请输入用户名" />
					</view>
					<view class="password">
						<image class="img" src="/static/image/mipmap-xhdpi/password.png" mode=""></image>
						<input class="input" password placeholder-class="account-placeholder" type="text" :value="password" placeholder="请输入6-12位密码" />
					</view>
				</view>
			</view>
			<view class="irrigation">
				<text class="text">灌溉记录</text>
				<view class="irrigation-info">
				</view>
			</view>
		</view>
		<button class="button" type="default" @click="logout">退出登录</button>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex';
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			logout(){
				const info = {
					username: this.username,		//用户名
					password: this.password,		//用户密码
					expiration: null,		//token 有效期
					token: null,		//token
					valid: null,		//截至有效时间
				}
				this.setUserInfo(info)
				uni.setStorage({
					key: "user",
					data: info,
					success() {
						uni.navigateTo({
							url:'../login/login',
							fail(e) {
								console.log(e)
							}
						})
					}
				})
			},
			...mapActions('user', ['setUserInfo'])
		},
		computed:{
			...mapState("user", ['username', 'password'])
		}
	}
</script>

<style lang="scss" scoped>
.logout{
	.title{
		width: 280.18rpx;
		height: 51.58rpx;
		background: #F8F5F5;
		border-top: 1px solid #299384;
		border-bottom: 1px solid #299384;
		border-radius: 11.72rpx;
		margin: 62.13rpx 0 36.34rpx 28.13rpx;
		
		font-size: 33.99rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #299384;
		line-height: 51.58rpx;
		text-align: center;
	}
	.info{
		width: 750.29rpx;
		height: 758.49rpx;
		background: #F0FBF9;
		border-radius: 11.72rpx;
		
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		.account, .irrigation{
			width: 647.12rpx;
			height: 317.7rpx;
			margin: 23.44rpx;
			border: 1.17rpx solid #0D3B34;
			border-radius: 11.72rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.text{
				font-size: 28.13rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #1D786C;
			}
		}
		.account{
			.account-info{
				width: 445.48rpx;
				height: 279.01rpx;
				background: #7DB6A8;
				border-radius: 11.72rpx;
				padding: 5.86rpx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				align-items: center;
				.username, .password{
					width: 415rpx;
					height: 73.85rpx;
					padding: 5.86rpx 11.72rpx;
					background: #B1D3CB;
					border-radius: 29.3rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					.img{
						width: 45.72rpx;
						height: 50.41rpx;
					}
					.input{
						width: 351.69rpx;
						margin-left: 11.72rpx;
					color: #FFFFFF;
					font-weight: 400;
					font-size: 25.79rpx;
					}
				}
			}
			.account-placeholder{
				color: #FFFFFF;
				font-weight: 400;
				font-size: 25.79rpx;
			}
		}
	}
	.irrigation{
		.text{}
		.irrigation-info{
			width: 445.48rpx;
			height: 279.01rpx;
			background: #7DB6A8;
			border-radius: 11.72rpx;
			padding: 5.86rpx;
		}
	}
	.button{
		width: 569.75rpx;
		height: 67.99rpx;
		background: #1D786C;
		border-radius: 11.72rpx;
		margin: 46.89rpx auto;
		
		font-size: 35.16rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		line-height: 67.99rpx;
		color: #FFFFFF;
	}
}
</style>
